<template>
  <view class="news-page">
    <!-- 标题栏 -->
    <view class="page-header">
      <text class="title">最新资讯</text>
      <view class="decor-line"></view>
    </view>

    <!-- 新闻列表 -->
    <scroll-view scroll-y class="news-list">
      <view
        v-for="(item, index) in newsList"
        :key="index"
        class="news-card"
        @click="goDetail(item)"
      >
        <!-- 新闻图片 -->
        <image
          :src="_imgUrl + item.photo"
          mode="aspectFill"
          class="news-image"
        />

        <!-- 内容区 -->
        <view class="content">
          <text class="title">{{ item.title }}</text>
          <text class="summary">{{ item.summary || '-' }}</text>
          <view class="meta">
            <text class="time">{{ item.createTime }}</text>
            <view class="read-count">
              <view class="cuIcon-attention"></view>
              <!-- {{  }} -->
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        {
          title: "乡村振兴新举措：数字农业助力现代农业发展",
          summary:
            "农业农村部近日发布数字农业建设最新进展，通过物联网、大数据等技术实现精准种植...",
          image: "/static/news/1.jpg",
          time: "2024-02-20",
          views: 2356,
        },
        {
          title: "全国春耕生产全面展开，新技术应用提升效率",
          summary: "今年春耕期间，全国推广使用智能农机设备，播种效率提升40%...",
          image: "/static/news/2.jpg",
          time: "2024-02-19",
          views: 1890,
        },
        // 更多新闻数据...
      ],
      _imgUrl: this.$base.url,
    };
  },
  onLoad() {
    this.getnewsList();
  },
  onShow() {
  	const curPages = getCurrentPages()[0]; // 获取当前页面实例
  	if (typeof curPages.getTabBar === "function" && curPages.getTabBar()) {
  	  curPages.getTabBar().setData({
  	    selected: 0,
  	  });
  	}
  },
  methods: {
    async getnewsList() {
      try {
        let res = await this.$api.list("information");
        if (res.code == 200) {
          this.newsList = res.rows;
        }
      } catch (error) {}
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/newsDetail/newsDetail?id=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.news-page {
  background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
  min-height: 100vh;
  padding: 40rpx;
}

.page-header {
  margin-bottom: 48rpx;

  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #2d3748;
    position: relative;
  }

  .decor-line {
    height: 4rpx;
    width: 80rpx;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    margin-top: 16rpx;
  }
}

.news-list {
  padding-bottom: 40rpx;
}

.news-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.1);
  overflow: hidden;
}

.news-image {
  width: 100%;
  height: 400rpx;
  background: #f1f3fe;
}

.content {
  padding: 32rpx;

  .title {
    font-size: 34rpx;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 24rpx;
  }

  .summary {
    font-size: 28rpx;
    color: #718096;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-bottom: 32rpx;
  }
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .time {
    font-size: 24rpx;
    color: #a0aec0;
  }

  .read-count {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #667eea;

    .cuIcon-attention {
      margin-right: 8rpx;
      font-size: 28rpx;
    }
  }
}
</style>
